<template>
<div class="background">
  <button class="return" @click="exit">
      <img src="/static/images/returnbutton.jpg" style="position:absolute; width:30px; height:30px"/>
  </button>
<div class="container"></div>
<div class="leaderboard">排行榜</div>
<div class="friend"></div>
<div class="world"></div>
  <div class="box">
    <div class="nav">
      <div :class="{'selected':tab === 1,'title':true}" @click="changTab(1)">
        好友排名
      </div>
      <div :class="{'selected':tab === 2,'title':true}" @click="changTab(2)">
        世界排名
      </div>
    </div>
    <div class="context">     
      <!-- 好友排名-->
      <div v-if="tab===1">  
        <scroll-view   :style="{'height': '355px','width': '90%','margin-left':'5%'}" :scroll-y="true" @scrolltolower="scrolltolower" @scroll="scroll" >
        <div v-for="(friend, index) in friendList" :key="friend.id">
          <div class="rank">
            <!-- 这里是排名的图标 还没找到合适图片 -->
            <div class="icon">{{index+1}}</div>
            <!-- 这里是用户的头像 -->
            <img class="img" :src="friend.avatarUrl"/>
            <div class="label">
              <p class="font">姓名：{{friend.nickName}}</p>
              <p class="font">分数：{{friend.score}}</p>
            </div>
          </div>
    <div class="weui-footer weui-footer_fixed-bottom">
      <div class="weui-footer__text">我的排名:{{userInfo2.no}}</div>
    </div>
        </div>
        </scroll-view>
      </div>
      <div v-if="tab===2">
      <scroll-view   :style="{'height': '355px','width': '90%','margin-left':'5%'}" :scroll-y="true" @scrolltolower="scrolltolower" @scroll="scroll" >
        <div v-for="(rank, index) in rankList" :key="rank.id">
          <div class="rank">
            <!-- 这里是排名的图标 还没找到合适图片 -->
            <div class="icon">{{index+1}}</div>
            <!-- 这里是用户的头像 -->
            <img class="img" :src="rank.avatarUrl"/>
            <div class="label">
              <p class="font">姓名：{{rank.nickName}}</p>
              <p class="font">分数：{{rank.score}}</p>
            </div>
          </div>
    <div class="weui-footer weui-footer_fixed-bottom">
      <div class="weui-footer__text">我的排名:{{userInfo.no}}</div>
    </div>
        </div>
        </scroll-view>
      </div>
    </div>

  </div>

</div>

</template>

<script>
import httpkit from '../../utils/http-kit'
import store from '../../utils/store'
export default {
  data () {
    return {
      rankList: [],
      friendList: [],
      tab: 1,
      userInfo: {},
      userInfo2: {}
    }
  },
  onLoad () {
    Object.assign(this.$data, this.$options.data())
  },
  mounted () {
    var _this = this
    httpkit.get('/rank/checkworld', {
      wechatId: store.state.openid
    }).then(res => {
      _this.rankList = res.data
      var user = _this.rankList.pop()
      // console.log(user)
      if (user.no === 0) {
        _this.userInfo = {
          no: '未上榜'}
      } else {
        _this.userInfo.no = user.no
      }
      // store.commit('changeScore', _this.userInfo.score)
    })
    httpkit.get('/rank/checkfriend', {
      wechatId: store.state.openid
    }).then(res => {
      _this.friendList = res.data
      _this.userInfo2 = _this.friendList.pop()
    })
  },

  methods: {
    exit () { // 退出房间
      wx.redirectTo({
        url: '../index/main'
      })
    },
    changTab (index) {
      this.tab = index
    },
    scrolltolower () {
      console.log(7)
    },
    scroll (e) {
      console.log(6)
      console.log(e)
    }
  }

}
</script>
<style>
::-webkit-scrollbar{
  width: 0;
  height: 0;
  color: transparent;
}
.label {
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  margin-left: 15px;
}
.font {
  font-size: 12px;
}
.icon {
  margin-top: 17px;
  margin-left: 15px;
  width: 30px;
  height: 30px;
  font-size: 24px;
  text-shadow: 3px 3px 5px rgb(72, 218, 255);
}
.img {
  margin-top: 20px;
  margin-left: 15px;
  width: 30px;
  height: 30px;
  border-radius: 15px;

}
.rank {
  display: flex;
  border-radius:15px;
  margin-top:12px;
  height: 70px;
  width: 100%;
  color: white;
  background-color:	#000000;
  opacity: 0.8;
}
.weui-footer__text {
  display: flex;
  position: absolute;
  bottom: 31px;
  height: 40px;
  width: 74%;
  left: 11%;
  right: 11%;
  border-radius:0px 0px 15px 15px;
  font-size: 18px;
  align-items: center;
  justify-content: center;
  color: #ffffff;
}
.box {
  position: absolute;
  width: 80%;
  height: 80%;
  top: 100px;
  left: 10%;
  right: 10%;
  font-size: 14px;
  border-radius: 15px;
}
.nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  align-content: center;
  justify-content: center;
  margin-top: 20px;
  width: 100%;
  height: 50px;
  font-size: 20px;
  border-radius: 15px;
  color: #f8f8fa;
}
.friend {
  border-radius:15px 15px 0px 0px;
  background-color:	#000000;
  opacity: 0.8;
  position: absolute;
  top: 120px;
  left: 10%;
  height: 50px;
  width: 39.885%;
}
.world {
  border-radius:15px 15px 0px 0px;
  background-color:	#000000;
  opacity: 0.8;
  position: absolute;
  top: 120px;
  right: 10%;
  height: 50px;
  width: 39.885%;
}
.title {
  display: flex;
  justify-content: center;
  justify-items: center;
  align-content: center;
  align-items: center;
  margin-top: 2%;
  width: 50%;
  height: 110%;
  letter-spacing:4px;
  font-weight:bold;

}
.selected {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  margin-left: 2%;
  margin-right: 2%;
  margin-top: 2%;
  height: 90%;
  width: 46%;
  border-radius:12px 12px 0px 0px;
  background-color: #757fdb;
  font-weight:bold;

}
.context {
  margin-left: 2%;
  margin-right: 2%;
  background-color: #757fdb;
}
.background {
    display: flex;
    flex-direction: column;
    position:absolute;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url(https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3059856828,1415522416&fm=26&gp=0.jpg);
}
.container {
    position:absolute;
    top: 13%;
    left: 10%;
    width: 80%;
    height: 82%;
    border-radius: 15px;
    background-color:	#000000;
    opacity: 0.5;
    color: aliceblue;
    align-items: center;
    text-align: center;
    justify-content: center;
}
.leaderboard {
    position:absolute;
    top: 8%;
    left: 30%;
    width: 40%;
    height: 9%;
    border-radius: 15px;
    color: aliceblue;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 8px;
    font-size: 28px;
    text-shadow: 3px 3px 5px rgb(72, 218, 255);
}
.return{
  position: absolute;
  top: 4%;
  left: 3%;
  width: 20px;
  height: 35px;
  border-radius: 50%;
  border-style: solid;
  border-width: 3px;
  border-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>


